<!-- 跳转页面事件设置 -->
<template>
    <div class="event-link">
        <div class="left-wrap">
            <el-scrollbar ref="pageScrollbarRef" height="100%">
                <el-menu
                    v-if="showMenu"
                    :default-active="pageRouter"
                    unique-opened
                    class="page-menu"
                >
                    <!-- 自定义页面组 -->
                    <template v-for="(item, index) in customPageData" :key="index">
                        <el-sub-menu :index="`customPage${index}`">
                            <template #title>
                                <div :title="item.group" class="title-warp">
                                    <el-icon><icon-folder /></el-icon>
                                    {{ item.group }}
                                </div>
                            </template>
                            <template v-for="(pageItem, pageIndex) in item.pages" :key="pageItem.router">
                                <el-menu-item :index="pageItem.router" :ref="el => setPageItemRef(el, pageItem.router)" @click="onSelectPage(pageItem, 'custom')">
                                    <el-icon v-if="pageItem.router === homePageRouter" title="首页"><icon-home /></el-icon>
                                    <div :title="pageItem.name" class="title-warp">
                                        {{ pageItem.name }}
                                    </div>
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="right-wrap">
            <div class="right-title">传入页面参数</div>
            <el-scrollbar>
                <link-param :event-data="eventData" class="right-content" />
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, computed, nextTick } from 'vue'
import usePage from '@/libs/edit/pageData'
import LinkParam from './components/link-param'
export default defineComponent({
    name: 'LinkSetting',
    components: {
        LinkParam
    },
    props: {
        // 事件数据
        eventData: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { eventData } = toRefs(props)
        
        const {
            appData,
            homePageRouter,
            customPageData
        } = usePage()

        const showMenu = ref(true)

        const pageRouter = computed({
            get: () => eventData.value?.['inner-page-link'] || '',
            set: val => eventData.value['inner-page-link'] = val
        })

        // 初始化
        const init = () => {
            // 更新菜单展开项
            showMenu.value = false
            nextTick(() => {
                showMenu.value = true
                setTimeout(() => updateScrollTop(), 500)
            })
        }

        const pageScrollbarRef = ref(null)
        const pageItemRef = ref({})
        const setPageItemRef = (el, router) => {
            pageItemRef.value[router] = el
        }
        // 更新滚动条位置，定位到选中的页面位置
        const updateScrollTop = () => {
            let top = 0
            let dom = pageItemRef.value?.[pageRouter.value]?.$el || null
            while((dom !== pageScrollbarRef.value?.$el) && !!dom) {
                top += dom?.offsetTop || 0
                dom = dom.offsetParent
            }
            pageScrollbarRef.value.setScrollTop(top)
        }

        // 选中页面
        const onSelectPage = (pageItem, type) => {
            const data = {}
            // 自定义页面
            if (type === 'custom') {
                data.action = 'inner-link'
                // data['inner-page-link'] = pageItem.router
                const pageItemParams = appData.value?.[pageItem.router]?.dataset?.params || {}
                const paramList = Object.values(pageItemParams)
                if (paramList.length > 0) {
                    const params = {}
                    paramList.forEach(item => params[item.name] = '')
                    data['inner-page-link-params'] = params
                }
            }
            // 系统页面
            else if (type === 'system') {
                data.action = 'inner-link'
                // data['inner-page-link'] = pageItem.router
            }
            // 外链页面
            else if (type === 'web') {
                data.action = 'outer-link'
                // data['inner-page-link'] = pageItem.router
            }
            // 功能页面
            else if (type === 'plugin') {
                data.action = 'plugin-link'
                // data['inner-page-link'] = pageItem.router
            }
            // 模块页面
            else if (type === 'module') {
                data.action = 'inner-link'
                // data['inner-page-link'] = pageItem.router
                const pageItemParams = pageItem?.parametersJson || {}
                const paramList = Object.values(pageItemParams)
                console.log(paramList)
                if (paramList.length > 0) {
                    const params = {}
                    paramList.forEach(item => params[item.name] = item.sampleValue)
                    data['inner-page-link-params'] = params
                }
            }
            pageRouter.value = pageItem.router
            Object.assign(eventData.value, data)
        }

        return {
            eventData,
            homePageRouter,
            customPageData,

            showMenu,
            pageRouter,
            
            init,
            pageScrollbarRef,
            setPageItemRef,
            updateScrollTop,
            onSelectPage
        }
    }
})
</script>

<style lang="less" scoped>
@import './link-setting.less';
</style>